<template>
    <div id="message">
        <el-row>
            <!-- 版图 -->
            <div class="domain">
            </div>

            <!-- 标题 -->
            <div class="title">
                留言板
            </div>

            <!-- 留言内容 -->
            <div class="message-list" v-for="message in onePageList">

                <!-- 一条留言 -->
                <div class="one-message">
                    <div class="user-info">
                        <div class="header-photo">
                            <div class="block">
                                <el-avatar :size="60" v-if="message['userName']" :src="'http://localhost:8080/img/header/'+message['userName']+'.jpg'"></el-avatar>
                            </div>
                        </div>
                        <div class="username">{{message['userName']}}</div>
                        <div class="submit-time">{{message['leaveTime']}}</div>
                    </div>
                    <div class="message-content" v-html="message['message']"></div>
                    <div class="dele-message" @click="deleteMessage(message)" v-if="isOwner(message['userName'])">删除留言</div>
                </div>

            </div>

            <!-- 翻页 -->
            <div class="cdpage">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        @current-change="handleCurrentChange"
                        :total="messageList.length">
                </el-pagination>
            </div>

            <!-- 留言区 -->
            <div class="new-message">
                <give-comment :receive-url="receiveUrl" :give-comment="giveComment" :inputsize="inputsize" @send-success="sendSuccess"></give-comment>
            </div>
        </el-row>
    </div>
</template>

<script>
    import GiveComment from '../../components/givecomment/GiveComment'
    export default {
        components: {GiveComment},
        name: "message",
        data(){
          return{
              messageList:[],//全部数据
              onePageList:[],//单页数据
              receiveUrl:'http://127.0.0.1:8080/message/addmessage',
              inputsize:{minRows:6},
              giveComment:{
                  'message':'',
                  'userName':''
              },
              currentPage:1
          }
        },
        created(){
            window.document.body.style.backgroundColor='rgb(199, 219, 241)';
            this.request({
                url: '/message/findall'
            }).then(res=>{
                for(let i=0;i<res.data.length;i++){
                    let message = res.data[i]['message'];
                    res.data[i]['leaveTime'] = res.data[i]['leaveTime'].substr(0,19);
                    res.data[i]['message'] = this.forMateContent(message);
                    this.messageList.push(res.data[i]);
                }
                this.handleCurrentChange(this.currentPage);//默认第一页
            }).catch(err=>{
                console.log(err);
            })
        },
        methods:{
            sendSuccess(giveComment){
                let message = giveComment['message'];
                giveComment['message'] = this.forMateContent(message);
                this.messageList.push(giveComment);
                if(this.onePageList.length<10){
                    this.onePageList.push(giveComment);
                }
            },
            forMateContent(content){
                content = '<p>'+content;
                let reg=new RegExp('\n','g')//g代表全部
                content = content.replace(reg,'</p><p>');
                return content;
            },
            // 显示第几页
            handleCurrentChange(val) {//val为当前页码
                this.currentPage = val;
                // this.onePageList.
                let len = this.onePageList.length;
                for(let i=0;i<len;i++){//清空单页内容
                    this.onePageList.splice(0,1);
                }
                for(let i=(val-1)*10;i<val*10 && i<this.messageList.length;i++){
                    this.onePageList.push(this.messageList[i]);
                }
                document.body.scrollTop = document.documentElement.scrollTop = 0;
            },
            deleteMessage(message){
                this.request({
                    url:'http://localhost:8080/message/removemessage/'+message['messageID']
                }).then(res=>{
                    this.messageList = this.messageList.filter(t => t['messageID'] != message['messageID']);
                    if(this.onePageList.length-1 == 0){
                        this.handleCurrentChange(this.currentPage-1);
                    }
                    else
                        this.onePageList = this.onePageList.filter(t => t['messageID'] != message['messageID']);
                    this.$message("已删除留言！");
                })
            },
            isOwner(userName){
                return userName == window.localStorage['username'];
            },
            // headPhoto(userName){
            //     //console.log('http://localhost:8080/img/header/'+userName+'.jpg');
            //     return 'http://localhost:8080/img/header/'+userName+'.jpg';
            // }
        }
    }
</script>

<style scoped>
#message{
    width: 80%;
    margin-left: 10%;
}
.domain{
    width: 80%;
    margin-left: 10%;
    height: 200px;
    margin-top: 20px;
    background: url("https://w.wallhaven.cc/full/ey/wallhaven-eymzjk.jpg") center no-repeat;
    background-size: cover;
    border-radius: 4px;
}
.title{
    height: 40px;
    padding: 20px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    line-height: 40px;
}
.one-message{
    width: 80%;
    margin-left: 10%;
    padding: 10px 5px;
    border: 1px solid #eee;
    margin-bottom: 30px;
    border-radius: 6px;
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
    background-color: white;
}
.header-photo{
    position: absolute;
    left: 70px;
}
.user-info{
    display: flex;
    justify-content: space-between;
    height: 35px;
    line-height: 25px;
}
.username{
    font-weight: bold;
    font-size: 12px;
    margin-left: 45px;
}
.submit-time{
    margin-right: 10px;
    font-weight: bold;
    font-size: 12px;
}
.message-content{
    padding: 20px 55px 30px 45px;
    font-size: 14px;
    border-top: 1px solid #eee;
}
.new-message{
    width: 80%;
    margin-left: 10%;
    margin-top: 60px;
}
.cdpage{
    text-align: center;
    margin-top: 45px;
}
.dele-message{
    font-size: 12px;
    color: #909399;
    margin-left: 90%;
    text-align: center;
    cursor: pointer;
}
.block span{
    border: solid 3px #eee;
}
</style>